@extends('layout.admin')
@section('title','新增视频界面')
@section('content')
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" >
        <div class="col-md-12" id="content" >
    <div class="app_content_div" id="app_content_div_301Index">
        <h3>新增视频</h3>
    </div>

    <form class="form-horizontal"  method="post" action="/adm/video-create" enctype="multipart/form-data">
        <input type="hidden" name="_token" id="_token" value="{{csrf_token()}}" />
        <div class="form-group">
            <label for="title" class="col-sm-2 control-label"><span style="color:red;">*</span>标题</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" >
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-2 control-label"><span style="color:red;">*</span>视频路径</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="video" name="video" >
            </div>
        </div>
        <div class="form-group">
            <label for="type" class="col-sm-2 control-label"><span style="color:red;">*</span>视频类型</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="type" id="video_type1" value="1" checked> 录播
                </label>
                <label class="radio-inline">
                    <input type="radio" name="type" id="video_type2" value="0"> 直播
                </label>
            </div>
        </div>

        <div class="form-group" >
            <label for="description" class="col-sm-2 control-label"><span style="color:red;">*</span>课程简介</label>
            <div class="col-sm-10">
                <script id="description" name="description" type="text/plain"></script>
                <script type="text/javascript">
                    var editor = UE.getEditor('description')//创建Ueditor编译器
                </script>
            </div>
        </div>
        <div class="form-group">
            <label for="start_time" class="col-sm-2 control-label"><span style="color:red;">*</span>直播开始时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control ui_timepicker" id="start_at" name="start_at" >
            </div>
        </div>
        <div class="form-group">
            <label for="end_time" class="col-sm-2 control-label"><span style="color:red;">*</span>直播结束时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control ui_timepicker" id="end_at" name="end_at" >
            </div>
        </div>
        <div class="form-group">
            <label for="upload_file" class="col-sm-2 control-label"><span style="color:red;">*</span>缩略图</label>
            <div class="col-sm-10">
                <input  id="upload_file" name="upload_file"  type="file" onchange="saveThumb()"/>
                <input type="hidden" class="form-control" id="img_thumb" name="img_thumb" >
                <img style="width:320px; height:200px;" alt="" id="image" src=""  />
            </div>
        </div>
        <div class="form-group">
            <label for="expertlist" class="col-sm-2 control-label"><span style="color:red;">*</span>关联专家</label>
            <div class="col-sm-10">
                <select id="expert">
                    <option value="">请选择</option>
                    @foreach($oMasters as $o)
                    <option value="{{$o->id}}">{{$o->name}}</option>
                    @endforeach
                </select>
                <button class="btn btn-default" type="button" onclick="addexpert()">添加</button>
                <style>
                    .expert{margin:5px;}
                </style>
                <div id="expertlist" name="expertlist"></div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">确定</button>
            </div>
        </div>
    </form>



        <script>
            function addexpert(){
                var expert = $('#expert option:selected');//是否被选中
                var flag = true;
                var experthtml = '';
                if(expert.val()){
                    $('#expertlist').find('input').each(function(){
                        if($(this).val()==expert.val()){
                            flag = false;
                            return false;
                        }
                    });
                    if(flag){
                        experthtml += '<div>';
                        experthtml += '		<input type="hidden" value="'+expert.val()+'" name="doc_id[]">';
                        experthtml += '		<span class="expert">'+expert.text()+'</span>';
                        experthtml += '		<span class="glyphicon glyphicon-remove mouse" onclick="$(this).parent().remove()"></span>';
                        experthtml += '</div>';
                        $('#expertlist').append(experthtml);
                    }else{
                        alert('您已经添加过该专家了');
                        return false;
                    }
                }else{
                    alert('请先选择一个专家');
                    return false;
                }
            }
        </script>
            <script>
                function saveThumb() {
                    $.ajaxFileUpload({
                        url: "/adm/video-upload-thumb",
                        secureuri: false,//不使用安全的url
                        fileElementId: "upload_file",
                        dataType: "json",
                        data:{_token:$("#_token").val()},
                        success: function(data, status) {
                            if(data.success){
                                $("#img_thumb").val(data.img_thumb);
                                $("#thumb").attr("src", data.img_thumb);
                                alert("添加成功");
                            }else{
                                alert(data.msg);}

                        }
                    })
                }
            </script>
    </div>
    </div>
@endsection
